<div id="reportFilterForm" class='backend_form'>
  <form id="reportForm" action="<?php echo url_for('@report') ?>" method="post">
    <div>
		<?php echo $search_form['search_type']->render() ?>
	</div>
	<div id="search_content">
		<div><?php echo $search_form['start_date']->renderLabel().' '.$search_form['start_date']->render() ?></div>
		<div><?php echo $search_form['end_date']->renderLabel().' '.$search_form['end_date']->render() ?></div>
	</div>
	<input  id="fs" type="submit" value="<?php echo "Tìm" ?>"/>
	<input  id="format" name="format" type="submit" value="Xuất Excel">
  </form>
</div>
<div style='padding-top:10px;'>
<div class="UITable">
  <div id="indexAjax" class='filter_form'>
    <?php include 'indexAjax.php' ?>
  </div>
</div>
</div>
<script>
	var sort_by = '';
	var sort_order = 0;
	var current_view = '';
	var page = 1;

	function listReload(page)
	{
    $('#indexAjax').html('<div align="center"><div class="loader_admin"></div></div>');
    $('#indexAjax').load('<?php echo url_for('@report') ?>?'+$('#filterSearch').serialize(), {
        sort_by:      sort_by,
        sort_order:   sort_order,
        page:         page,
        view:         current_view,
    	});
	}

	function sort(type, default_order) {
    	if (type != sort_by) {
        	sort_by = type;
        	sort_order = default_order;
    	} else if(sort_order) {
        	sort_order = 0
    	} else {
        	sort_order = 1;
    	}
    	listReload(1);
	}
	function loadFilter()
	{
		if ($('#report_filter_search_type').val() == 1)
			$('#search_content').html('<div><?php echo $search_form["start_date"]->renderLabel().$search_form["start_date"]->render() ?></div><div><?php echo $search_form["end_date"]->renderLabel().$search_form["end_date"]->render() ?></div>');
		else if ($('#report_filter_search_type').val() == 2)
			$('#search_content').html('<div><?php echo $search_form["start_week"]->renderLabel().$search_form["start_week"]->render() ?></div><div><?php echo $search_form["end_week"]->renderLabel().$search_form["end_week"]->render() ?></div>');
		else 
			$('#search_content').html('<div><?php echo $search_form["start_month"]->renderLabel().$search_form["start_month"]->render() ?></div><div><?php echo $search_form["end_month"]->renderLabel().$search_form["end_month"]->render() ?></div>');
			
		$( "#report_filter_start_date" ).datepicker({
				showOn: "button",
			});
		$( "#report_filter_end_date" ).datepicker({
				showOn: "button",
			});
			$( ".week-picker" ).datepicker({
			    dateFormat: "yy-mm-dd",
			    showOtherMonths: true,
			    selectOtherMonths: true,
			    changeMonth: true,
			    changeYear: true,
			    showWeek: true,
			    beforeShow: function(dateText, inst) { 

			        // for week highighting
			        $(".ui-datepicker-calendar tr").live("mousemove", function() { 
			            $(this).find("td a").addClass("ui-state-hover"); 
			            $(this).find(".ui-datepicker-week-col").addClass("ui-state-hover");
			        });
			        $(".ui-datepicker-calendar tr").live("mouseleave", function() { 
			            $(this).find("td a").removeClass("ui-state-hover");
			            $(this).find(".ui-datepicker-week-col").removeClass("ui-state-hover");      
			        });
			    },
			    onClose: function(dateText, inst) { 
			        var wk = $.datepicker.iso8601Week(new Date(dateText));
			        if (parseInt(wk) < 10) {
			            wk = "0" + wk;
			        }           
			        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

			        if (isNaN(wk)) {
			            $(this).val("");
			        } else {
			            $(this).val(year + "-" + wk);
			        }

			        // disable live listeners so they dont impact other instances
			        $(".ui-datepicker-calendar tr").die("mousemove");
			        $(".ui-datepicker-calendar tr").die("mouseleave");

			    }
			});
	}
	$(function() {
			$( "#report_filter_start_date" ).datepicker({
				showOn: "button",
			});
			$( "#report_filter_end_date" ).datepicker({
				showOn: "button",
			});
		});
</script>